<!-- 
全部类名、ID名前缀必须加上: DaiLianWanzi_
全部函数名必须加上: DaiLianWanzi_Function_
-->
<style></style>

<div id="DaiLianWanzi_Body">
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <div class="layui-colla-title">参数</div>
            <div class="layui-colla-content layui-show">
                <div class="layui-input-block" style="margin-bottom: 20px;">
                    {% include '页面/代练通与代练丸子_v2/代练丸子/表单-功能按钮区.html' %}
                </div>
                <div class="layui-input-inline" style="width: auto;">
                    <label class="layui-form-label">订单状态：</label>
                    <div class="layui-input-block">
                        <select id="DaiLianWanzi_StatusFilter" class="layui-select">
                            <option value="0">全部</option>
                            <option value="101">待付待接</option>
                            <option value="102">代练中</option>
                            <option value="103">待验收</option>
                            <option value="104">撤销中</option>
                            <option value="105">仲裁中</option>
                            <option value="106">已撤销</option>
                            <option value="107">已仲裁</option>
                            <option value="108">已结算</option>
                            <option value="109">异常中</option>
                            <option value="110">锁定中</option>
                            <option value="111">已取消</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn layui-btn-primary" id="DaiLianWanzi_FilterBtn">
                    <i class="layui-icon layui-icon-search"></i> 筛选
                </button>

            </div>
        </div>
    </div>
    <table class="layui-hide" id="DaiLianWanzi_OrderTable"></table>
</div>


{% include '页面/代练通与代练丸子_v2/代练丸子/表格-自定义操作模板.html' %}



<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        // 初始化表单元素
        form.render();


        /**
         * 初始化订单表格
         */
        var orderTable = table.render({
            elem: '#DaiLianWanzi_OrderTable',
            cols: [[ //标题栏
                { type: 'checkbox', fixed: 'left' },
                { field: 'order_id', title: 'ID', width: 50, sort: true },
                { field: 'title', title: '标题', width: 350 },
                { field: 'gameRegionName', title: '区域', width: 100 },
                { field: 'gameServerName', title: '服务器', width: 80 },
                { field: 'amount', title: '价格', width: 100, "align": "center", sort: true },
                { field: 'securityDeposit', title: '安全金', width: 80, "align": "center" },
                { field: 'efficiencyDeposit', title: '效率金', width: 80, "align": "center" },
                { field: 'hour', title: '时间限制', width: 100 },
                {
                    field: 'status', title: '状态', width: 100, templet: (res) => {
                        var text = ""
                        switch (res.status) {
                            case 2:
                                // 待接手：绿色系表示初始/待处理状态
                                text = "<span style='color: #4CAF50;'>待接手</span>";
                                break;
                            case 3:
                                // 代练中：蓝色系表示进行中状态
                                text = "<span style='color: #2196F3;'>代练中</span>";
                                break;
                            case 4:
                                // 待验收：橙色系表示待确认状态
                                text = "<span style='color: #FF9800;'>待验收</span>";
                                break;
                            case 5:
                                // 撤销中：黄色系表示撤销中状态
                                text = "<span style='color: #FFEB3B;'>撤销中</span>";
                                break;
                            case 6:
                                // 异常：红色系表示异常状态（偏负面）
                                text = "<span style='color: #F44336;'>异常</span>";
                                break;
                            case 9:
                                // 仲裁中：黄色系表示仲裁中状态
                                text = "<span style='color: #FFEB3B;'>仲裁中</span>";
                                break;
                            case 10:
                                // 已撤销：灰色系表示已终止（偏中性）
                                text = "<span style='color: #9E9E9E;'>已撤销</span>";
                                break;
                            case 14:
                                // 已取消：红色系表示主动取消（偏负面）
                                text = "<span style='color: #F44336;'>已取消</span>";
                                break;

                            default:
                                // 未知状态：深灰色表示未定义状态
                                text = "<span style='color: #607D8B;'>未知状态</span>";
                                break;
                        }
                        return text;

                    }
                },
                { field: 'Action', title: '操作', width: 140, "fixed": "right", "align": "center", "toolbar": "#DaiLianWanzi_templat-order-tool" },

            ]],
            // 使用v2版本API，通过done回调实现自定义参数传递
            url: '/api/dailianwanzi/get_order_list_v2/', // 更新为v2版本API
            method: 'GET',

            page: true, // 是否显示分页
            limits: [1, 10, 50, 100],
            limit: 10, // 每页默认显示的数量
            // 解析后端返回的数据格式
            parseData: function (res) {
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.message, // 解析提示文本
                    "count": res.data.page.totalCount, // 解析总条数
                    "data": res.data.order_list // 解析数据列表
                };
            }
        });

        /**
         * 筛选功能实现
         */
        $('#DaiLianWanzi_FilterBtn').on('click', function () {
            var table_type = $('#DaiLianWanzi_StatusFilter').val();
            console.log(table_type);

            // 重载表格，传递筛选参数
            orderTable.reload({
                where: {
                    table_type: table_type,
                },

            });
        });

        /**
         * 监听分页切换事件，确保筛选条件在分页时保持
         */
        table.on('page(DaiLianWanzi_OrderTable)', function (obj) {
            var table_type = $('#DaiLianWanzi_StatusFilter').val();
            console.log(table_type);

            orderTable.reload({
                where: {
                    table_type: table_type,
                    page: obj.curr,
                    page_size: obj.limit
                }
            });
        });

        // 自定义
        window.DaiLianWanzi_Function_ZiDingYiCaoZuoMoBan(table, $)
    }); 
</script>